<template>
  <el-row>
    <el-col :span="12"
      ><div
        id="one"
        style="width: 500px; height: 400px;"
      ></div
    ></el-col>
    <el-col :span="12"
      ><div
        id="main"
        style="width: 500px; height: 400px;"
      ></div
    ></el-col>
  </el-row>
</template>

<script>
import * as echarts from "echarts";
export default {
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      var oneChart = echarts.init(document.getElementById("one"));
      // 绘制图表
      oneChart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["Matcha Latte", 43.3],
            ["Milk Tea", 83.1],
            ["Cheese Cocoa", 86.4],
            ["Walnut Brownie", 72.4],
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }],
      });

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["product", "2015", "2016", "2017"],
            ["Matcha Latte", 43.3, 85.8, 93.7],
            ["Milk Tea", 83.1, 73.4, 55.1],
            ["Cheese Cocoa", 86.4, 65.2, 82.5],
            ["Walnut Brownie", 72.4, 53.9, 39.1],
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
